<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <title>Vertical Playground</title>

    <script src="../blockly_uncompressed_vertical.js"></script>
    <script src="../msg/messages.js"></script>
    <script src="../blocks_vertical/vertical_extensions.js"></script>
    <script src="../blocks_common/math.js"></script>
    <script src="../blocks_common/text.js"></script>
    <script src="../blocks_common/colour.js"></script>
    <script src="../blocks_vertical/control.js"></script>
    <script src="../blocks_vertical/event.js"></script>
    <script src="../blocks_vertical/motion.js"></script>
    <script src="../blocks_vertical/looks.js"></script>
    <script src="../blocks_vertical/procedures.js"></script>
    <script src="../blocks_vertical/operators.js"></script>
    <script src="../blocks_vertical/pen.js"></script>
    <script src="../blocks_vertical/sound.js"></script>
    <script src="../blocks_vertical/sensing.js"></script>
    <script src="../blocks_vertical/data.js"></script>
    <script src="../blocks_vertical/default_toolbox.js"></script>
    <script src="../blocks_vertical/customs.js"></script>
    <script src="../arduino_compressed.js"></script>


    <script>
      'use strict';

      var workspace = null;

      function start() {

        // Setup blocks
        // Parse the URL arguments.
        var match = location.search.match(/dir=([^&]+)/);
        var rtl = match && match[1] == 'rtl';
        //document.forms.options.elements.dir.selectedIndex = Number(rtl);
        var toolbox = getToolboxElement();
//        document.forms.options.elements.toolbox.selectedIndex =
//          toolbox ? 1: 0;

        match = location.search.match(/side=([^&]+)/);

        var side = match ? match[1] : 'start';

//        document.forms.options.elements.side.value = side;

        // Create main workspace.
        workspace = Blockly.inject('content_blocks', {
          comments: false,
          disable: false,
          collapse: false,
          media: '../media/',
          readOnly: false,
          rtl: rtl,
          scrollbars: true,
          toolbox: toolbox,
          toolboxPosition: side == 'top' || side == 'start' ? 'start' : 'end',
          horizontalLayout: side == 'top' || side == 'bottom',
//          sounds: soundsEnabled,
          grid:
             {spacing: 20,
              length: 3,
              colour: '#ccc',
              snap: true},
          zoom: {
            controls: true,
            wheel: true,
            startScale: 0.75,
            maxScale: 4,
            minScale: 0.25,
            scaleSpeed: 1.1
          },
          colours: {
            fieldShadow: 'rgba(255, 255, 255, 10)',
            dragShadowOpacity: 0.6
          },
          trashcan: true
        });

      }

      function getToolboxElement() {
        var match = location.search.match(/toolbox=([^&]+)/);
        return document.getElementById('toolbox-' + (match ? match[1] : 'categories'));
      }

    </script>

    <style>
      html, body {
        height: 100%;
      }

      body {
        background-color: #fff;
        font-family: sans-serif;
        overflow: hidden;
      }


      #content_blocks {
        #float: right;
        height: 99%;
        width: 99%;

        position: relative;
        left: 0px;
        top: -960px;
      }

      #collaborators {
        float: right;
        width: 30px;
        margin-left: 10px;
      }

      #collaborators > img {
        margin-right: 5px;
        height: 30px;
        padding-bottom: 5px;
        width: 30px;
        border-radius: 3px;
      }

      /* Tabs */
      #tabRow>td {
        border: 1px solid #ccc;
      }
      td.tabon {
        border-bottom-color: #ddd !important;
        background-color: #ddd;
        padding: 5px 10px;
      }
      td.taboff {
        cursor: pointer;
        padding: 5px 19px;
      }
      td.taboff:hover {
        background-color: #eee;
      }
      td.tabmin {
        border-top-style: none !important;
        border-left-style: none !important;
        border-right-style: none !important;
      }
      td.tabmax {
        border-top-style: none !important;
        border-left-style: none !important;
        border-right-style: none !important;
        width: 99%;
        text-align: right;
      }

      /*table {*/
        /*border-collapse: collapse;*/
        /*margin: 0;*/
        /*padding: 0;*/
        /*border: none;*/
      /*}*/
      /*td {*/
        /*padding: 0;*/
        /*vertical-align: top;*/
      /*}*/
      /*#content_blocks #content_xml #content_arduino {*/
        /*visibility: hidden;*/
        /*margin: 10ex;*/
        /*padding: 10ex;*/
        /*position: absolute;*/
        /*direction: ltr;*/
      /*}*/
      pre.content {
        overflow: scroll;
      }
      #content_blocks {
        padding: 0;
      }
      .blocklySvg {
        border-top: none !important;
      }
      #content_xml {
        resize: none;
        outline: none;
        border: none;
        font-family: monospace;
        overflow: scroll;
      }
      button {
        padding: 1px 1em;
        font-size: 90%;
        border-radius: 4px;
        border: 1px solid #ddd;
        background-color: #eee;
        color: black;
      }
      button.launch {
        border: 1px solid #d43;
        background-color: #d43;
        color: white;
      }
      button:active {
        border: 1px solid blue !important;
      }
      button:hover {
        box-shadow: 2px 2px 5px #888;
      }


    </style>
  </head>

  <body onload="start()">
  <div>
    <table height="100%" width="100%">
    <tr>
      <td>
        <table width="100%">
          <tr id="tabRow" height="1em">
            <td id="tab_blocks" class="tabon" onclick="tabClick('blocks')">Blocks</td>
            <td id="tab_arduino" class="taboff" onclick="tabClick('arduino')">Arduino</td>
            <td id="tab_xml" class="taboff" onclick="tabClick('xml')">XML</td>
          </tr>
        </table>
      </td>
    </tr>
    </table>
    </div>
    <div id="collaborators"></div>
    <div id="content_blocks"></div>
    <textarea id="content_arduino" class="content" readonly wrap="off"></textarea>
    <textarea id="content_xml" class="content" wrap="off"></textarea>
    <!-- Simple toolbox -->

    <xml id="toolbox-simple" style="display: none">
  <category name="Control" colour="#FFAB19" secondaryColour="#CF8B17">
    <block type="control_wait" id="control_wait">
      <value name="DURATION">
        <shadow type="math_positive_number">
          <field name="NUM">1</field>
        </shadow>
      </value>
    </block>
    <block type="control_repeat" id="control_repeat">
      <value name="TIMES">
        <shadow type="math_whole_number">
          <field name="NUM">10</field>
        </shadow>
      </value>
    </block>
    <block type="control_forever" id="control_forever"></block>
    <block type="control_if" id="control_if"></block>
    <block type="control_if_else" id="control_if_else"></block>
    <block type="control_wait_until" id="control_wait_until"></block>
    <block type="control_repeat_until" id="control_repeat_until"></block>
    <block type="control_stop" id="control_stop"></block>
    <block type="control_start_as_clone" id="control_start_as_clone"></block>
    <block type="control_create_clone_of" id="control_create_clone_of">
      <value name="CLONE_OPTION">
        <shadow type="control_create_clone_of_menu"></shadow>
      </value>
    </block>
    <block type="control_delete_this_clone" id="control_delete_this_clone"></block>
  </category>
  <category name="Sensing" colour="#4CBFE6" secondaryColour="#2E8EB8">
    <block type="sensing_touchingobject" id="sensing_touchingobject">
      <value name="TOUCHINGOBJECTMENU">
        <shadow type="sensing_touchingobjectmenu"></shadow>
      </value>
    </block>
    <block type="sensing_touchingcolor" id="sensing_touchingcolor">
      <value name="COLOR">
        <shadow type="colour_picker"></shadow>
      </value>
    </block>
    <block type="sensing_coloristouchingcolor" id="sensing_coloristouchingcolor">
      <value name="COLOR">
        <shadow type="colour_picker"></shadow>
      </value>
      <value name="COLOR2">
        <shadow type="colour_picker"></shadow>
      </value>
    </block>
    <block type="sensing_distanceto" id="sensing_distanceto">
      <value name="DISTANCETOMENU">
        <shadow type="sensing_distancetomenu"></shadow>
      </value>
    </block>
    <block type="sensing_keypressed" id="sensing_keypressed">
        <value name="KEY_OPTION">
          <shadow type="sensing_keyoptions"></shadow>
        </value>
    </block>
    <block type="sensing_mousedown" id="sensing_mousedown"></block>
    <block type="sensing_mousex" id="sensing_mousex"></block>
    <block type="sensing_mousey" id="sensing_mousey"></block>
    <block type="sensing_loudness" id="sensing_loudness"></block>
    <block type="sensing_timer" id="sensing_timer"></block>
    <block type="sensing_resettimer" id="sensing_resettimer"></block>
    <block type="sensing_of" id="sensing_of">
      <value name="PROPERTY">
        <shadow type="sensing_of_property_menu"></shadow>
      </value>
      <value name="OBJECT">
        <shadow type="sensing_of_object_menu"></shadow>
      </value>
    </block>
    <block type="sensing_current" id="sensing_current">
      <value name="CURRENTMENU">
        <shadow type="sensing_currentmenu"></shadow>
      </value>
    </block>
    <block type="sensing_dayssince2000" id="sensing_dayssince2000"></block>
  </category>
  <category name="Operators" colour="#40BF4A" secondaryColour="#389438">
    <block type="operator_add" id="operator_add">
      <value name="NUM1">
        <shadow type="math_number">
          <field name="NUM"></field>
        </shadow>
      </value>
      <value name="NUM2">
        <shadow type="math_number">
          <field name="NUM"></field>
        </shadow>
      </value>
    </block>
    <block type="operator_subtract" id="operator_subtract">
      <value name="NUM1">
        <shadow type="math_number">
          <field name="NUM"></field>
        </shadow>
      </value>
      <value name="NUM2">
        <shadow type="math_number">
          <field name="NUM"></field>
        </shadow>
      </value>
    </block>
    <block type="operator_multiply" id="operator_multiply">
      <value name="NUM1">
        <shadow type="math_number">
          <field name="NUM"></field>
        </shadow>
      </value>
      <value name="NUM2">
        <shadow type="math_number">
          <field name="NUM"></field>
        </shadow>
      </value>
    </block>
    <block type="operator_divide" id="operator_divide">
      <value name="NUM1">
        <shadow type="math_number">
          <field name="NUM"></field>
        </shadow>
      </value>
      <value name="NUM2">
        <shadow type="math_number">
          <field name="NUM"></field>
        </shadow>
      </value>
    </block>
    <block type="operator_random" id="operator_random">
      <value name="FROM">
        <shadow type="math_number">
          <field name="NUM">1</field>
        </shadow>
      </value>
      <value name="TO">
        <shadow type="math_number">
          <field name="NUM">10</field>
        </shadow>
      </value>
    </block>
    <block type="operator_lt" id="operator_lt">
      <value name="OPERAND1">
        <shadow type="text">
          <field name="TEXT"></field>
        </shadow>
      </value>
      <value name="OPERAND2">
        <shadow type="text">
          <field name="TEXT"></field>
        </shadow>
      </value>
    </block>
    <block type="operator_equals" id="operator_equals">
      <value name="OPERAND1">
        <shadow type="text">
          <field name="TEXT"></field>
        </shadow>
      </value>
      <value name="OPERAND2">
        <shadow type="text">
          <field name="TEXT"></field>
        </shadow>
      </value>
    </block>
    <block type="operator_gt" id="operator_gt">
      <value name="OPERAND1">
        <shadow type="text">
          <field name="TEXT"></field>
        </shadow>
      </value>
      <value name="OPERAND2">
        <shadow type="text">
          <field name="TEXT"></field>
        </shadow>
      </value>
    </block>
    <block type="operator_and" id="operator_and"></block>
    <block type="operator_or" id="operator_or"></block>
    <block type="operator_not" id="operator_not"></block>
    <block type="operator_join" id="operator_join">
      <value name="STRING1">
        <shadow type="text">
          <field name="TEXT">hello</field>
        </shadow>
      </value>
      <value name="STRING2">
        <shadow type="text">
          <field name="TEXT">world</field>
        </shadow>
      </value>
    </block>
    <block type="operator_letter_of" id="operator_letter_of">
      <value name="LETTER">
        <shadow type="math_whole_number">
          <field name="NUM">1</field>
        </shadow>
      </value>
      <value name="STRING">
        <shadow type="text">
          <field name="TEXT">world</field>
        </shadow>
      </value>
    </block>
    <block type="operator_length" id="operator_length">
      <value name="STRING">
        <shadow type="text">
          <field name="TEXT">world</field>
        </shadow>
      </value>
    </block>
    <block type="operator_contains" id="operator_contains">
      <value name="STRING1">
        <shadow type="text">
          <field name="TEXT">hello</field>
        </shadow>
      </value>
      <value name="STRING2">
        <shadow type="text">
          <field name="TEXT">world</field>
        </shadow>
      </value>
    </block>
    <block type="operator_mod" id="operator_mod">
      <value name="NUM1">
        <shadow type="math_number">
          <field name="NUM"></field>
        </shadow>
      </value>
      <value name="NUM2">
        <shadow type="math_number">
          <field name="NUM"></field>
        </shadow>
      </value>
    </block>
    <block type="operator_round" id="operator_round">
      <value name="NUM">
        <shadow type="math_number">
          <field name="NUM"></field>
        </shadow>
      </value>
    </block>
    <block type="operator_mathop" id="operator_mathop">
      <value name="NUM">
        <shadow type="math_number">
          <field name="NUM"></field>
        </shadow>
      </value>
    </block>
  </category>
  <category name="Data" colour="#FF8C1A" secondaryColour="#DB6E00" custom="VARIABLE">
  </category>

      <category name="cust" colour="#00B295" secondaryColour="#0B8E69">
        <block type="base_pin"></block>
      </category>

  </xml>



    <!-- Sidebar -->
  <script>
    var TABS_ = ['blocks', 'arduino', 'xml'];

    var selected = 'blocks';
    function tabClick(clickedName) {
      console.log(clickedName);
        // If the XML tab was open, save and render the content.
        if (document.getElementById('tab_xml').className == 'tabon') {
          var xmlTextarea = document.getElementById('content_xml');
          var xmlText = xmlTextarea.value;
          var xmlDom = null;
          try {
            xmlDom = Blockly.Xml.textToDom(xmlText);
          } catch (e) {
            var q =
                window.confirm('Error parsing XML:\n' + e + '\n\nAbandon changes?');
            if (!q) {
              // Leave the user on the XML tab.
              return;
            }
          }
          if (xmlDom) {
            Blockly.mainWorkspace.clear();
            Blockly.Xml.domToWorkspace(Blockly.mainWorkspace, xmlDom);
          }
        }

        if (document.getElementById('tab_blocks').className == 'tabon') {
          Blockly.mainWorkspace.setVisible(false);
        }
        // Deselect all tabs and hide all panes.
        for (var i = 0; i < TABS_.length; i++) {
          var name = TABS_[i];
          document.getElementById('tab_' + name).className = 'taboff';
          document.getElementById('content_' + name).style.visibility = 'hidden';
        }

       // Select the active tab.
        selected = clickedName;
        document.getElementById('tab_' + clickedName).className = 'tabon';
        // Show the selected pane.
        document.getElementById('content_' + clickedName).style.visibility =
            'visible';
        renderContent();
        if (clickedName == 'blocks') {
          Blockly.mainWorkspace.setVisible(true);
        }
        //Blockly.fireUiEvent(window, 'resize');
      }

      function renderContent() {
        var content = document.getElementById('content_' + selected);
        // Initialize the pane.
        if (content.id == 'content_blocks') {
          // If the workspace was changed by the XML tab, Firefox will have performed
          // an incomplete rendering due to Blockly being invisible.  Rerender.
          Blockly.mainWorkspace.render();
        } else if (content.id == 'content_xml') {
          var xmlTextarea = document.getElementById('content_xml');
          var xmlDom = Blockly.Xml.workspaceToDom(Blockly.mainWorkspace);
          var xmlText = Blockly.Xml.domToPrettyText(xmlDom);
          xmlTextarea.value = xmlText;
          xmlTextarea.focus();
        /*} else if (content.id == 'content_javascript') {
          content.innerHTML = Blockly.JavaScript.workspaceToCode();
        } else if (content.id == 'content_dart') {
          content.innerHTML = Blockly.Dart.workspaceToCode();
        } else if (content.id == 'content_python') {
          content.innerHTML = Blockly.Python.workspaceToCode();*/
        } else if (content.id == 'content_arduino') {
          //content.innerHTML = Blockly.Arduino.workspaceToCode();
          var arduinoTextarea = document.getElementById('content_arduino');
          arduinoTextarea.value = Blockly.Arduino.workspaceToCode();
          arduinoTextarea.focus();
        }
      }

  </script>

  </body>
</html>
